<script setup lang="ts">
import { ref, getCurrentInstance, computed, onMounted, onUnmounted, watch } from 'vue'
import Header from '@/components/layout/Header.vue';
import Button from '@/components/common/Button.vue';
import type { TabsPaneContext } from 'element-plus'
import { CoinItem, Logo } from '@/interfaces/currency';
import { getList, logo } from '@/apis/currency';
import { useCoinStore } from '@/store/coin';
import { formatNumberWithThousands } from '@/utils/utils';
import Loading from '@/components/common/Loading.vue';
import 'element-plus/es/components/dropdown/style/css';
import { hasTel } from '@/apis/user';
import { userStore } from '@/store/user';
import router from '@/router';


const menuList = ref([
    { title: '总览', path: '/', icon: 'icon-zonglan' },
    { title: '资产', path: '/', icon: 'icon-zichanfenxi-zichanshuli' },
    { title: '订单', path: '/', icon: 'icon-icon_order' },
    { title: '账户', path: '/', icon: 'icon-qitazhanghu' },
    { title: '设置', path: '/', icon: 'icon-shezhi01' },
])
const assetType = ref('currency')
const logoList = ref<Logo>({})
const isLoading = ref(true)
const activeIndex = ref(0)
const activeName = ref('first')
const list = ref<CoinItem[]>([])
const currencyId = ref<string>()
const instance = getCurrentInstance()
const expand = ref(true)
let currencySocket: any
const connectCurrency = () => {
    if (currencyId.value) {
        currencySocket.unsubscribe(currencyId.value, '/topic/market')
    }
    currencyId.value = Date.now().toString(36) + Math.floor(Math.random() * 1000).toString(36)
    currencySocket.subscribe(currencyId.value, `/topic/market`, (data: CoinItem) => {
        let item = list.value?.find(item => item.currencyPair === data.currencyPair)
        if (item) {
            item.src = "https://file.uhx.io/" + logoList.value[item.currencyPair.split('-')[0]]
            Object.assign(item, data)
        }
        item = data
    })
}
const obj = computed(() => {
    let info = {} as any
    useCoinStore().coinPriceList.forEach(item => {
        info[item.coinName] = item
    })
    return info
}) as any
const handleClick = (tab: TabsPaneContext, event: Event) => {
}
const getListFn = async () => {
    logoList.value = await logo()
    const data = await getList();
    data.map((item, i) => {
        if (i < 8) {
            item.checked = true
        } else {
            item.checked = false
        }
        item.src = "https://file.uhx.io/" + logoList.value[item.currencyPair.split('-')[0]]
        return item
    })
    list.value = data
    isLoading.value = false
}
const toSecurity = (type: string) => {
    router.push('/security?type=' + type)
}
const changeMenu = (i: number) => {
    router.replace({
        path: '/my',
        query: { index: i }
    })
    activeIndex.value = i
}
onMounted(async () => {
    if (router.currentRoute.value.query.index) {
        activeIndex.value = Number(router.currentRoute.value.query.index)
    }
    document.title = '加密货币市场 | 币价和市值 | UHX'
    getListFn()
    try {
        const info = await hasTel()
        userStore().setUserInfo({ phone: info.accountName })
    } catch (error) {
        console.log(error)
    }
})
onUnmounted(() => {
    if (currencySocket) {
        currencySocket.unsubscribe(currencyId.value, '/topic/market')
    }
})
watch(() => userStore().currencySocket, (val) => {
    if (val) {
        if (instance) {
            currencySocket = instance.appContext.config.globalProperties.$currencySocket
            if (currencySocket.connected) {
                connectCurrency()
            }
        }
    }
}, { immediate: true })
</script>

<template>
    <div>
        <Header />
        <div class="md:flex hidden">
            <div class="md:w-[248px] sm:w-[192px] h-[calc(100vh-64px)] pt-[24px] box-border">
                <div v-for="item, i in menuList" :key="i" @click="changeMenu(i)"
                    class="h-[48px] mb-[8px] hover:bg-[#f5f5f5] rounded-tr-[12px] rounded-br-[12px] flex items-center justify-between px-[16px] cursor-pointer"
                    :class="[i === activeIndex ? 'bg-[#f5f5f5]' : ' ']">
                    <div class="flex items-center " :class="[i === activeIndex ? 'text-[#000]' : 'text-[#9c9c9c] ']">
                        <div class="iconfont" :class="[item.icon]"></div>
                        <div class="ml-[10px]">{{ item.title }}</div>
                    </div>
                </div>
            </div>
            <div class="md:w-[calc(100vw-248px)] sm:w-[calc(100vw-192px)] h-[calc(100vh-64px)] box-border">
                <el-scrollbar>
                    <div class="md:px-[32px] sm:px-[24px] max-w-[1352px] mx-auto">
                        <div v-show="activeIndex === 0">
                            <div class="mt-[24px] h-[104px] flex items-center mb-[16px]">
                                <img src="/src/assets/user.png" class="w-[64px] rounded-full" />
                                <div class="pl-[24px]">
                                    <div class=" text-[20px] font-bold">{{ userStore().userInfo.nickName }}</div>
                                    <div class=" text-[14px] mt-[6px]">{{ userStore().userInfo.email }}</div>
                                </div>
                                <div class="w-[1px] h-[32px] bg-[#ededed] mx-[40px]"></div>
                                <div>
                                    <div class="text-[14px] text-[#9c9c9c]">UID</div>
                                    <div class="text-[14px]">{{ userStore().userInfo.id }}</div>
                                </div>
                            </div>
                            <div
                                class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[12px] flex justify-between ">
                                <div class="mb-[12px]">
                                    <div class="flex items-center mb-[8px]">
                                        <div class="text-[20px] font-bold">总资产估值</div>
                                        <div class="ml-[6px]">
                                            <span class="iconfont icon-mimakejian text-[14px]"></span>
                                        </div>
                                    </div>
                                    <div class="flex items-center">
                                        <div class="text-[32px] font-bold">16.23333</div>
                                        <div class="ml-[10px] text-[14px]">USDT</div>
                                    </div>
                                    <div class="text-[14px] my-[8px]">
                                        ≈16.223
                                    </div>
                                    <div class="flex items-center text-[14px]">
                                        <div>今日盈亏</div>
                                        <div class="mx-[4px]">
                                            <span class="iconfont icon-info-circle text-[#9c9c9c] text-[14px]"></span>
                                        </div>
                                        <div class="text-rise">+$111.11</div>
                                    </div>
                                </div>
                                <div class="flex gap-[10px]">
                                    <Button type="default">充值</Button>
                                    <Button type="default">提现</Button>
                                    <Button type="default">买币</Button>
                                </div>
                            </div>
                            <div class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[12px] mt-[24px]">
                                <div class="mb-[16px]">
                                    <div class="flex items-center mb-[8px]">
                                        <div class="text-[24px] font-bold">行情</div>
                                    </div>
                                </div>
                                <div>
                                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                                        <el-tab-pane label="热门" name="first">
                                            <div>
                                                <div
                                                    class="flex items-center text-[12px] justify-between text-[#9c9c9c] h-[40px] px-[16px] hover:bg-[#fafafa] dark:hover:bg-[#29313d] rounded-[8px] cursor-pointer">
                                                    <div class="w-[280px] dark:text-[#707A8A]">币种</div>
                                                    <div class="w-[180px] text-right dark:text-[#707A8A]">币价</div>
                                                    <div class="w-[180px] text-right dark:text-[#707A8A]">24h涨跌</div>
                                                    <div class="w-[180px] text-right dark:text-[#707A8A]">交易</div>
                                                </div>
                                                <el-scrollbar height="300px">
                                                    <template v-if="!isLoading">
                                                        <div v-for="item, i in list" :key="i"
                                                            class="flex items-center justify-between  h-[60px] px-[16px] dark:hover:bg-[#29313d] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                                                            <div class="w-[280px] flex items-center">
                                                                <img class="w-[24px] h-[24px]" :src="item.src" />
                                                                <div class="ml-[10px]  ">{{
                                                                    item.currencyPair.split('-')[0]
                                                                    }}
                                                                </div>
                                                            </div>
                                                            <div class="w-[180px] text-right">
                                                                <div class="">{{
                                                                    obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                                                        ?
                                                                        formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                                                        : formatNumberWithThousands(item.amount) }}</div>
                                                                <div
                                                                    class="mt-[2px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]">
                                                                    ${{
                                                                        obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                                                            ?
                                                                            formatNumberWithThousands(item.externalPrice.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                                                            : formatNumberWithThousands(item.externalPrice) }}
                                                                </div>
                                                            </div>
                                                            <div :class="[item.percent > 0 ? 'text-rise' : 'text-fall']"
                                                                class="font-bold w-[180px] text-right">{{
                                                                    item.percent >= 0 ?
                                                                        '+' :
                                                                        ''
                                                                }}{{ Number(item.percent *
                                                                    100).toFixed(2) }}%</div>
                                                            <div class="w-[180px] text-right">
                                                                <ElTooltip content="交易" class="group">
                                                                    <span
                                                                        class="iconfont icon-lazhutu hover:text-primary-400"></span>
                                                                </ElTooltip>
                                                            </div>
                                                        </div>
                                                    </template>
                                                    <div v-else class="h-[300px] flex justify-center items-center">
                                                        <Loading />
                                                    </div>
                                                </el-scrollbar>
                                            </div>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </div>
                        </div>
                        <div v-show="activeIndex === 1" class="mt-[24px]">
                            <div
                                class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[12px] flex justify-between ">
                                <div class="mb-[12px]">
                                    <div class="flex items-center mb-[8px]">
                                        <div class="text-[20px] font-bold">总资产估值</div>
                                        <div class="ml-[6px]">
                                            <span class="iconfont icon-mimakejian text-[14px]"></span>
                                        </div>
                                    </div>
                                    <div class="flex items-center">
                                        <div class="text-[32px] font-bold">16.23333</div>
                                        <div class="ml-[10px] text-[14px]">USDT</div>
                                    </div>
                                    <div class="text-[14px] my-[8px]">
                                        ≈16.223
                                    </div>
                                    <div class="flex items-center text-[14px]">
                                        <div>今日盈亏</div>
                                        <div class="mx-[4px]">
                                            <span class="iconfont icon-info-circle text-[#9c9c9c] text-[14px]"></span>
                                        </div>
                                        <div class="text-rise">+$111.11</div>
                                    </div>
                                    <div class="gap-[10px] hidden md:flex lg:hidden mt-[16px]">
                                        <Button type="default">充值</Button>
                                        <Button type="default">提现</Button>
                                        <Button type="default">划转</Button>
                                        <Button type="default">历史记录</Button>
                                    </div>
                                </div>
                                <div class="gap-[10px] hidden lg:flex">
                                    <Button type="default">充值</Button>
                                    <Button type="default">提现</Button>
                                    <Button type="default">划转</Button>
                                    <Button type="default">历史记录</Button>
                                </div>
                            </div>
                            <div
                                class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[12px] flex justify-between mt-[24px]">
                                <div class="mb-[12px] w-full">
                                    <div class="flex items-center mb-[8px]">
                                        <div class="text-[24px] font-bold">我的资产</div>
                                    </div>
                                    <div class="mt-[24px]">
                                        <el-tabs v-model="assetType">
                                            <el-tab-pane label="币种视角" name="currency">
                                                <div>
                                                    <div
                                                        class="flex items-center text-[12px] justify-between text-[#9c9c9c] h-[40px]  rounded-[8px] cursor-pointer">
                                                        <div class="w-1/4 dark:text-[#707A8A]">币种</div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">币价</div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">数量</div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">今日盈亏</div>
                                                    </div>
                                                    <div class="flex justify-center">
                                                        <div class="flex flex-col justify-center h-[200px]">
                                                            <span
                                                                class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                                            <div class=" text-center mt-[6px]">暂无数据</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-tab-pane>
                                            <el-tab-pane label="账户视角" name="account">
                                                <div>
                                                    <div
                                                        class="flex items-center text-[12px] justify-between text-[#9c9c9c] h-[40px] rounded-[8px] cursor-pointer">
                                                        <div class="w-1/4 dark:text-[#707A8A]">账户</div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">数量</div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">比率</div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">操作</div>
                                                    </div>
                                                    <div
                                                        class="flex items-center justify-between  h-[60px]  dark:hover:bg-[#29313d] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                                                        <div class="w-1/4 dark:text-[#707A8A] flex items-center">
                                                            <div
                                                                class="iconfont icon-xianhuozhanghu mr-[8px] text-[20px]">
                                                            </div>
                                                            <div>现货账户</div>
                                                        </div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">
                                                            <div>16.0000</div>
                                                            <div class="text-[14px]">$16.00</div>
                                                        </div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">100%</div>
                                                        <div class="w-1/4 text-right">
                                                            <el-dropdown :show-arrow="false" placement="bottom-start">
                                                                <div class="iconfont icon-gengduo1  text-[20px]">
                                                                </div>
                                                                <template #dropdown>
                                                                    <div class="py-[6px] w-[100px]">
                                                                        <div
                                                                            class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                            充值</div>
                                                                        <div
                                                                            class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                            提现</div>
                                                                        <div
                                                                            class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                            划转</div>
                                                                        <div
                                                                            class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                            交易</div>
                                                                    </div>
                                                                </template>
                                                            </el-dropdown>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="flex items-center justify-between  h-[60px]  dark:hover:bg-[#29313d] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                                                        <div class="w-1/4 dark:text-[#707A8A] flex items-center">
                                                            <div
                                                                class="iconfont icon-heyuezhanghu mr-[8px] text-[20px]">
                                                            </div>
                                                            <div>合约账户</div>
                                                        </div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">
                                                            <div>16.0000</div>
                                                            <div class="text-[14px]">$16.00</div>
                                                        </div>
                                                        <div class="w-1/4 text-right dark:text-[#707A8A]">100%</div>
                                                        <div class="w-1/4 text-right">
                                                            <el-dropdown :show-arrow="false" placement="bottom-start">
                                                                <div class="iconfont icon-gengduo1  text-[20px]">
                                                                </div>
                                                                <template #dropdown>
                                                                    <div class="py-[6px] w-[100px]">
                                                                        <div
                                                                            class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                            划转</div>
                                                                        <div
                                                                            class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                            交易</div>
                                                                    </div>
                                                                </template>
                                                            </el-dropdown>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[12px] flex justify-between mt-[24px]">
                                <div class="mb-[12px] w-full">
                                    <div class="flex items-center mb-[8px]">
                                        <div class="text-[24px] font-bold">近期充提交易</div>
                                    </div>
                                    <div class="mt-[24px]">
                                        <div>
                                            <div
                                                class="flex items-center text-[12px] justify-between text-[#9c9c9c] h-[40px]  rounded-[8px] cursor-pointer">
                                                <div class="w-1/4 dark:text-[#707A8A]">交易记录</div>
                                                <div class="w-1/4 text-right dark:text-[#707A8A]">数量</div>
                                                <div class="w-1/4 text-right dark:text-[#707A8A]">时间</div>
                                                <div class="w-1/4 text-right dark:text-[#707A8A]">订单状态</div>
                                            </div>
                                            <div class="flex justify-center">
                                                <div class="flex flex-col justify-center h-[200px]">
                                                    <span
                                                        class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                                    <div class=" text-center mt-[6px]">暂无数据</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-show="activeIndex === 2" class="mt-[24px]">
                            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                                <el-tab-pane label="当前委托" name="currentCommission">
                                    <div class="h-[500px">
                                        <ElDropdown :show-arrow="false">
                                            <div
                                                class="h-[40px] border-solid border-[1px] hover:border-primary-400 border-[#dddddd] rounded-[10px] flex justify-between items-center w-[176px] px-[12px] cursor-pointer">
                                                <div class="text-[14px] text-[#9c9c9c]">交易对</div>
                                                <div>全部</div>
                                            </div>
                                            <template #dropdown>
                                                <div class="w-[200px] my-[10px]">
                                                    <div
                                                        class="h-[36px] cursor-pointer hover:bg-[#f5f5f5] hover:text-[#000] text-[#757575] leading-[36px] px-[12px]">
                                                        BTC
                                                    </div>
                                                </div>
                                            </template>
                                        </ElDropdown>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="历史委托" name="historicalCommission">
                                </el-tab-pane>
                                <el-tab-pane label="历史成交" name="historicalTransactions">
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                        <div v-show="activeIndex === 3">
                            <div class="text-[32px] mt-[24px] font-bold">身份认证</div>
                            <div class="mt-[24px] h-[104px] flex items-center mb-[24px]">
                                <img src="/src/assets/user.png" class="w-[64px] rounded-full" />
                                <div class="pl-[24px]">
                                    <div class=" text-[20px] font-bold">{{ userStore().userInfo.nickName }}</div>
                                    <div class=" text-[14px]">{{ userStore().userInfo.email }}</div>
                                    <div
                                        class="bg-[#e6fff1] text-[#2ebd85] w-[60px] text-[14px] flex items-center text-center px-[6px] mt-[6px] rounded-[4px]">
                                        普通认证</div>
                                </div>
                                <div class="w-[1px] h-[32px] bg-[#ededed] mx-[40px]"></div>
                                <div>
                                    <div class="text-[14px] text-[#9c9c9c]">UID</div>
                                    <div class="text-[14px]">{{ userStore().userInfo.id }}</div>
                                </div>
                            </div>
                            <div
                                class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[12px] flex justify-between ">
                                <div class="mb-[12px] w-full">
                                    <div class="flex items-center mb-[8px]">
                                        <div class="text-[24px] font-bold">双重验证(2FA)</div>
                                    </div>
                                    <div class="flex justify-between w-[100%] items-center mt-[24px]">
                                        <div class="flex">
                                            <span
                                                class="iconfont font-bold text-[20px] icon-a-v31-24px-line-gugeyanzhengqi"></span>
                                            <div class="ml-[10px]">
                                                <div class="mb-[4px] leading-[20px]">身份验证器App</div>
                                                <div class="text-[#9c9c9c] mt-[10px]">使用谷歌验证器保护您的账户和交易。</div>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <div class="iconfont "
                                                :class="[userStore().userInfo.bindGoogleAuth ? 'icon-success text-[#2ebd85]' : 'icon-error']">
                                            </div>
                                            <div class="mr-[16px] ml-[6px] text-[14px] ">{{
                                                userStore().userInfo.bindGoogleAuth ? '启用' : '关闭' }}
                                            </div>
                                            <Button type="default" class="w-[100px]"
                                                @click="toSecurity('1')">管理</Button>
                                        </div>
                                    </div>
                                    <div class="flex justify-between w-[100%] items-center mt-[24px]">
                                        <div class="flex">
                                            <span class="iconfont font-bold text-[20px] icon-youxiang1"></span>
                                            <div class="ml-[10px]">
                                                <div class="mb-[4px] leading-[20px]">邮箱</div>
                                                <div class="text-[#9c9c9c] mt-[10px]">使用邮箱保护您的账户与交易。</div>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <div class="mr-[16px] ml-[6px] text-[14px] ">关闭
                                            </div>
                                            <Button type="default" class="w-[100px]"
                                                @click="toSecurity('2')">管理</Button>
                                        </div>
                                    </div>
                                    <div class="flex justify-between w-[100%] items-center mt-[24px]">
                                        <div class="flex">
                                            <span class="iconfont font-bold text-[20px] icon-shoujihaoma1"></span>
                                            <div class="ml-[10px]">
                                                <div class="mb-[4px] leading-[20px]">手机号码</div>
                                                <div class="text-[#9c9c9c] mt-[10px]">使用手机号码保护您的账户与交易。</div>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <div class="iconfont "
                                                :class="[userStore().userInfo.phone ? 'icon-success text-[#2ebd85]' : 'icon-error']">
                                            </div>
                                            <div class="mr-[16px] ml-[6px] text-[14px] ">{{
                                                userStore().userInfo.phone ? userStore().userInfo.phone : '关闭' }}
                                            </div>
                                            <Button type="default" class="w-[100px]"
                                                @click="toSecurity('3')">管理</Button>
                                        </div>
                                    </div>
                                    <div class="flex justify-between w-[100%] items-center mt-[24px]">
                                        <div class="flex">
                                            <span class="iconfont font-bold text-[20px] icon-jianpan-xianxing"></span>
                                            <div class="ml-[10px]">
                                                <div class="mb-[4px] leading-[20px]">登录密码</div>
                                                <div class="text-[#9c9c9c] mt-[10px]">用于管理您的账户登录密码</div>
                                            </div>
                                        </div>
                                        <Button type="default" class="w-[100px]" @click="toSecurity('4')">管理</Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <div class="md:hidden">
            <div @click="expand = !expand"
                class="h-[24px] py-[12px] px-[16px] border-solid border-0 border-b-[1px] border-[#ededed] flex justify-between items-center">
                <div>{{ menuList[activeIndex].title }}</div>
                <div class="iconfont" :class="!expand ? 'icon-xiangxia1' : 'icon-xiangshang1'"></div>
            </div>
            <div class="pt-[8px]" v-show="!expand">
                <div @click="activeIndex = i; expand = true" class="h-[24px] py-[12px] px-[16px] flex items-center"
                    v-for="item, i in menuList" :key="i">
                    <div class="flex items-center" :class="[i === activeIndex ? 'text-black' : 'text-[#9c9c9c]']">
                        <div class="iconfont mt-[2px]" :class="item.icon"></div>
                        <div class="ml-[10px]">{{ item.title }}</div>
                    </div>
                </div>
            </div>
            <div v-show="expand">
                <div v-show="activeIndex === 0">
                    <div class="flex justify-between items-center px-[16px] mt-[24px] mb-[40px]">
                        <div class="flex items-center">
                            <img src="/src/assets/user.png" class="w-[56px] rounded-full" />
                            <div class="ml-[16px]">
                                <div class="font-bold">{{ userStore().userInfo.email }}</div>
                                <div class="text-[12px] text-[#9c9c9c] mt-[6px]">UID: {{ userStore().userInfo.id }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="px-[16px] mb-[64px]">
                        <div class="flex items-center mb-[8px]">
                            <div class="text-[16px] font-bold">总资产估值</div>
                            <div class="ml-[6px]">
                                <span class="iconfont icon-mimakejian text-[14px]"></span>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="font-bold text-[24px]">16.23333</div>
                            <div class="ml-[10px] text-[14px]">USDT</div>
                        </div>
                        <div class="text-[14px] my-[8px]">
                            ≈16.223
                        </div>
                        <div class="flex items-center text-[14px]">
                            <div>今日盈亏</div>
                            <div class="mx-[4px]">
                                <span class="iconfont icon-info-circle text-[#9c9c9c] text-[14px]"></span>
                            </div>
                            <div class="text-rise">+$111.11</div>
                        </div>
                        <div class="flex gap-[10px] mt-[24px]">
                            <Button type="default" class="w-1/3">充值</Button>
                            <Button type="default" class="w-1/3">提现</Button>
                            <Button type="default" class="w-1/3">买币</Button>
                        </div>
                    </div>
                    <div class="px-[16px]">
                        <div class="flex justify-between items-center mb-[16px]">
                            <div class="text-[20px] font-bold">行情</div>
                            <div class="text-[14px]">更多</div>
                        </div>
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="热门" name="first">
                                <div>
                                    <div
                                        class="flex items-center text-[12px] justify-between text-[#9c9c9c] h-[40px] hover:bg-[#fafafa] dark:hover:bg-[#29313d] rounded-[8px] cursor-pointer">
                                        <div class="w-1/2 dark:text-[#707A8A]">币种</div>
                                        <div class="w-1/4 text-right dark:text-[#707A8A]">币价</div>
                                        <div class="w-1/4 text-right dark:text-[#707A8A]">24h涨跌</div>
                                    </div>
                                    <template v-if="!isLoading">
                                        <div v-for="item, i in list" :key="i"
                                            class="flex items-center justify-between  py-[8px] h-[48px] dark:hover:bg-[#29313d] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                                            <div class="w-1/2 flex items-center">
                                                <img class="w-[24px] h-[24px]" :src="item.src" />
                                                <div class="ml-[10px] text-[14px]">{{
                                                    item.currencyPair.split('-')[0]
                                                }}
                                                </div>
                                            </div>
                                            <div class="w-1/4 text-right">
                                                <div class="text-[14px]">{{
                                                    obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                                        ?
                                                        formatNumberWithThousands(item.amount.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                                        : formatNumberWithThousands(item.amount) }}</div>
                                                <div class="mt-[2px] text-[12px] text-[#9c9c9c] dark:text-[#707A8A]">
                                                    ${{
                                                        obj[(item.currencyPair.split('-')[0])]?.unitDecimals
                                                            ?
                                                            formatNumberWithThousands(item.externalPrice.toFixed(obj[(item.currencyPair.split('-')[0])].unitDecimals))
                                                            : formatNumberWithThousands(item.externalPrice) }}
                                                </div>
                                            </div>
                                            <div :class="[item.percent > 0 ? 'text-rise' : 'text-fall']"
                                                class="w-1/4 text-right text-[14px]">{{
                                                    item.percent >= 0 ?
                                                        '+' :
                                                        ''
                                                }}{{ Number(item.percent *
                                                    100).toFixed(2) }}%</div>
                                        </div>
                                    </template>
                                    <div v-else class="h-[300px] flex justify-center items-center">
                                        <Loading />
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div v-show="activeIndex === 1">
                    <div class="px-[16px] mb-[64px] mt-[24px]">
                        <div class="flex items-center mb-[8px]">
                            <div class="text-[16px] font-bold">总资产估值</div>
                            <div class="ml-[6px]">
                                <span class="iconfont icon-mimakejian text-[14px]"></span>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="font-bold text-[24px]">16.23333</div>
                            <div class="ml-[10px] text-[14px]">USDT</div>
                        </div>
                        <div class="text-[14px] my-[8px]">
                            ≈16.223
                        </div>
                        <div class="flex items-center text-[14px]">
                            <div>今日盈亏</div>
                            <div class="mx-[4px]">
                                <span class="iconfont icon-info-circle text-[#9c9c9c] text-[14px]"></span>
                            </div>
                            <div class="text-rise">+$111.11</div>
                        </div>
                        <div class="flex gap-[6px] mt-[24px]">
                            <Button type="default" class="w-1/4">充值</Button>
                            <Button type="default" class="w-1/4">提现</Button>
                            <Button type="default" class="w-1/4">划转</Button>
                            <Button type="default" class="w-1/4 overflow-hidden">历史记录</Button>
                        </div>
                    </div>
                    <div class="px-[16px]">
                        <div class="text-[20px] font-bold">我的资产</div>
                        <el-tabs v-model="assetType" @tab-click="handleClick">
                            <el-tab-pane label="币种视角" name="currency">
                                <div>
                                    <div class="flex justify-center">
                                        <div class="flex flex-col justify-center h-[200px]">
                                            <span
                                                class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                            <div class=" text-center mt-[6px]">暂无数据</div>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="账户视角" name="account">
                                <div>
                                    <div
                                        class="flex items-center justify-between  h-[60px]  dark:hover:bg-[#29313d] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                                        <div class=" dark:text-[#707A8A] flex items-center">
                                            <div class="iconfont icon-xianhuozhanghu font-bold mr-[8px] text-[20px]">
                                            </div>
                                            <div class="font-bold">现货账户</div>
                                        </div>
                                        <div class="text-right dark:text-[#707A8A] flex items-center">
                                            <div>
                                                <div class="text-[14px]">16.0000</div>
                                                <div class="text-[12px]">$16.00</div>
                                            </div>
                                            <div class="ml-[10px]">
                                                <el-dropdown :show-arrow="false" placement="bottom-start">
                                                    <div class="iconfont icon-gengduo1 font-bold text-[20px]">
                                                    </div>
                                                    <template #dropdown>
                                                        <div class="py-[6px] w-[100px]">
                                                            <div
                                                                class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                充值</div>
                                                            <div
                                                                class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                提现</div>
                                                            <div
                                                                class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                划转</div>
                                                            <div
                                                                class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                交易</div>
                                                        </div>
                                                    </template>
                                                </el-dropdown>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="flex items-center justify-between  h-[60px]  dark:hover:bg-[#29313d] hover:bg-[#fafafa] rounded-[8px] cursor-pointer">
                                        <div class=" dark:text-[#707A8A] flex items-center">
                                            <div class="iconfont icon-heyuezhanghu font-bold mr-[8px] text-[20px]">
                                            </div>
                                            <div class="font-bold">合约账户</div>
                                        </div>
                                        <div class="text-right dark:text-[#707A8A] flex items-center">
                                            <div>
                                                <div class="text-[14px]">16.0000</div>
                                                <div class="text-[12px]">$16.00</div>
                                            </div>
                                            <div class="ml-[10px]">
                                                <el-dropdown :show-arrow="false" placement="bottom-start">
                                                    <div class="iconfont font-bold icon-gengduo1  text-[20px]">
                                                    </div>
                                                    <template #dropdown>
                                                        <div class="py-[6px] w-[100px]">
                                                            <div
                                                                class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                划转</div>
                                                            <div
                                                                class="px-[16px] hover:bg-[#fafafa] cursor-pointer h-[40px] leading-[40px]">
                                                                交易</div>
                                                        </div>
                                                    </template>
                                                </el-dropdown>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="px-[16px] mt-[64px]">
                        <div class="text-[20px] font-bold">近期充提交易</div>
                        <div>
                            <div class="flex justify-center">
                                <div class="flex flex-col justify-center h-[200px]">
                                    <span
                                        class="iconfont icon-no-data text-[#9c9c9c] text-[40px] dark:text-[#707A8A]"></span>
                                    <div class=" text-center mt-[6px]">暂无数据</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
:deep(.el-tabs__nav-wrap:after) {
    background-color: transparent;
}

:deep(.el-tabs__item.is-active) {
    color: #000
}
</style>

<style>
/* .dark .el-tabs__item {} */

.el-tabs__item {
    color: #9c9c9c
}

.el-tabs__active-bar {
    /* margin: 0 6px !important; */
}
</style>